<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>列排序</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../../js/lib/bootstrap/dist/css/bootstrap.min.css">
  <style>
    body {
      font-family: Georgia, serif;
    }
    .para {
      -ms-word-break: break-all;
          word-break: break-all;
    }  
  </style>
</head>
<body>

  <div class="container">
    <h1>列排序</h1>
    <pre>
      1. .col-md-push-x 和 .col-md-pull-(12-x) 可以使得左右两列交换顺序
      2. 可能在表单中提交按钮和重置按钮的页面优化中可以使用到
    </pre>
    <div class="row">
    </div>
  </div>

  <div class="container">
    <h1>列排序</h1>
    <div class="row">
      <div class="col-md-4">
        <h2>我是左,默认排在左边</h2>
        <p class="para">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.</p>
      </div>
      <div class="col-md-8">
        <h2>我是右,默认排在右边</h2>
        <p class="para">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.</p>
      </div>
    </div>
    <div class="row">
      <div class="col-md-4 col-md-push-8">
        <h2>我是左,现在排在右边</h2>
        <p class="para">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.</p>
      </div>
      <div class="col-md-8 col-md-pull-4">
        <h2>我是右,现在排在左边</h2>
        <p class="para">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.</p>
      </div>
    </div>   
  </div>

  <script src="../../js/lib/jquery/dist/jquery.min.js"></script>
  <script src="../../js/lib/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>